<template>
  <div id="fileBinding" class="person-detail">
    <div>
      <van-nav-bar title="档案绑定" :fixed="true" left-arrow @click-left="back"
        @click-right="$router.push({ path: '/work/myResume/addResume' })" />
    </div>
    <div class="addResume-body">
      <van-cell-group>
        <van-field v-model="detailsList[0].value" :label="detailsList[0].label" placeholder="" />
        <van-field rows="1" :label="detailsList[1].label" autosize input-align="right">
          <template slot="input">
            <van-radio-group v-model="detailsList[1].value">
              <van-radio checked-color="#DC4630" name="1">男</van-radio>
              <van-radio checked-color="#DC4630" name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="detailsList[2].value" :label="detailsList[2].label" placeholder="请输入身份证号" />
        <van-field v-model="detailsList[3].value" :label="detailsList[3].label" placeholder="与预留手机号保持一致" />
        <van-field v-model="detailsList[4].value" center clearable label="验证码" placeholder="请输入短信验证码">
          <van-button slot="button" size="small" type="primary" :disabled=disabled @click="sendMsg()"
            style="border:none;background:none;color:#DC4630;">{{buttontext}}</van-button>
        </van-field>
      </van-cell-group>
      <div class="mine-out">
        <van-button type="default" @click="bindInfo()">绑定</van-button>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import util from "@/controller/Common/util.js";
  export default {
    name: "fileBinding",
    components: {},
    data() {
      return {
        disabled: false,
        buttontext: '获取验证码',
        second: 60,
        detailsList: [{
            label: "姓名",
            value: ""
          },
          {
            label: "性别",
            value: ""
          },
          {
            label: "身份证号",
            value: ""
          },
          {
            label: "手机号",
            value: ""
          },
          {
            label: "验证码",
            value: ""
          }
        ]
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      sendMsg() {
        this.second = 60
        if (util.validatePhoneNum(this.detailsList[3].value)) {
          mine.user_v1_msg_code(this.detailsList[3].value).then(res => {
            if (res.code === "0") {
              this.$toast("发送成功");
              this.timer()
            } else {
              this.second = 0;
              this.buttontext = "获取验证码";
              this.disabled = false;
            }
          });
        } else {
          this.$toast("请输入正确的手机号");
          this.second = 0;
          this.buttontext = "获取验证码";
          this.disabled = false;
        }
      },
      timer() {
        if (this.second > 0) {
          this.disabled = true;
          this.second--;
          this.buttontext = this.second + "秒";
          setTimeout(this.timer, 1000);
        } else {
          this.second = 0;
          this.buttontext = "获取验证码";
          this.disabled = false;
        }
      },
      checkInfo() {
        if (
          this.detailsList[0].value == "" ||
          this.detailsList[1].value == "" ||
          this.detailsList[2].value == "" ||
          this.detailsList[4].value == "" ||
          this.detailsList[5].value == ""
        ) {
          return false;
        }
      },
      bindInfo() {
        if (!this.checkInfo) {
          this.$toast("输入不能为空");
          return;
        }
        let data = {
          code: this.detailsList[4].value,
          gender: this.detailsList[1].value,
          idcardNo: this.detailsList[2].value,
          phone: this.detailsList[3].value,
          username: this.detailsList[0].value
        };
        mine.medicalArchive_v1_bind(data).then(res => {
          if (res.code == "0") {
            this.$router.push({
              path: "/work/communityHealth/visitFile"
            });
          } else {
            this.$toast(res.msg);
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #fileBinding {
    p {
      margin: 5px 0;
    }

    background: #fff;

    .mine-out {
      padding: 50px 0;

      button {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
        font-size: 20px;
        color: #fff;
        letter-spacing: 0;
        text-align: center;
        background: #dc4630;
        border-radius: 20px;
      }
    }

    .van-radio-group {
      display: flex;
    }
  }
</style>